本文整理汇总了TypeScript中@soil/dom.h.input方法的典型用法代码示例。如果您正苦于以下问题：TypeScript h.input方法的具体用法？TypeScript h.input怎么用？TypeScript h.input使用的例子？那么恭喜您, 这里精选的方法代码示例或许可以为您提供帮助。您也可以进一步了解该方法所在类@soil/dom.h的用法示例。
在下文中一共展示了h.input方法的3个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: foods
const foodSelect = h.select({multiple: true}, [
foodSelectPlaceholderOption
])
const foodSelector = h.div({className: 'food-selector'}, [
h.div({className: 'top-controls'}, [
h.input({
type: 'search',
placeholder: 'Find foods (at least 3 characters)',
oninput: evt => {
const text = (evt.target as h.Input).value
if (text.length <= 2) {
foodSelect.innerHTML = ''
foodSelect.appendChild(foodSelectPlaceholderOption)
return
}
get('/find-foods/' + text)
.then((foods: BasicFood[]) => {
foodSelect.innerHTML = ''
foods
.map(f => h.option({value: f.ndb_no}, [f.long_desc]))
.forEach(opt => foodSelect.appendChild(opt))
})
}
}),
h.button({
onclick: () => {
Array
.from(foodSelect.options)
.filter(opt => opt.selected)
.forEach(opt => {示例2: findFoodsModal
export function findFoodsModal() {
const $foodGroupSelect = h.select({
oninput: () => {
findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
if (!$foodNameInput.value) {
$foodNameInput.focus()
}
}
}, [
h.option({value: '', selected: true}, ['All food groups'])
])
get<contract.FoodGroup[]>(`${serverUrl}/foods/groups`)
.then(cats => {
cats.forEach(cat => {
$foodGroupSelect.appendChild(
h.option({value: cat.FdGrp_Cd}, [cat.FdGrp_Desc])
)
})
})
const $foodNameInput = h.input({
type: 'search',
className: 's1',
placeholder: 'Enter at least 3 characters, e.g. "lentils cooked"',
oninput: () => findFoodsByNameAndGroup($foodNameInput.value, $foodGroupSelect.value)
})
const $resultList = h.ul()
const $modal = h.div({className: 'hidden find-foods-modal'}, [
h.div({className: 'h box'}, [
$foodGroupSelect,
$foodNameInput,
h.button({onclick: close, title: 'Close (Esc)'}, [icon('times')]),
]),
$resultList
])
function handleEsc(evt: KeyboardEvent) {
if (evt.key === 'Escape') {
close()
}
}
function open() {
$modal.classList.remove('hidden')
$foodNameInput.focus()
document.addEventListener('keydown', handleEsc)
}
function close() {
$modal.classList.add('hidden')
$foodNameInput.value = ''
document.removeEventListener('keydown', handleEsc)
}
function findFoodsByNameAndGroup(name: string, groupId: string) {
if (name.length <= 2) {
return
}
const urlName = 'name=' + name.replace(/\s/g, '%')
const urlGroupId = groupId ? '&groupId=' + groupId : ''
get<contract.FoundFood[]>(`${serverUrl}/foods/search?${urlName}${urlGroupId}`)
.then(foods => {
$resultList.innerHTML = ''
if (foods.length === 0) {
$resultList.appendChild(
h.li({className: 'no-results'}, ['No results.'])
)
return
}
foods.forEach(food => $resultList.appendChild(
h.li({}, [
foodGroupCircle(food),
h.a({href: 'index.html?id=' + food.NDB_No}, [food.Long_Desc])
])
))
})
}
return Object.assign($modal, {open})
}示例3: save
import {h} from '@soil/dom'
import {icon} from '../shared/dom/icon'
const page = h.div({className: 'page'}, [
h.h1({className: 'main-title'}, ['Your profile']),
h.form({}, [
h.ul({className: 'field-list'}, [
h.li({}, [
h.label({htmlFor: 'field-age'}, ['Age']),
h.input({id: 'field-age', type: 'number', min: '0', max: '150'})
]),
h.li({}, [
h.label({htmlFor: 'field-gender'}, ['Gender']),
h.select({id: 'field-gender'}, [
h.option({value: 'M'}, ['Male']),
h.option({value: 'F'}, ['Female'])
])
])
]),
h.hr(),
h.button({onclick: () => save()}, [icon('save'), 'Save'])
])
])
function save() {
// TODO
console.log('Saving...')
}
document.body.appendChild(page)